<template>
  <div>
    <!-- <div class="buttons">
      <el-button @click="setTableRows">自定义报表行头</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div> -->
    <div class="table_all">
      <div class="tree_content" draggable="true">
        <el-tree :data="customTree" default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"
          @check-change="getCheck" draggable @node-drag-start="nodeDrop" show-checkbox v-if="isShow">
        </el-tree>
      </div>
      <div class="table_part">
        <!--拖拽到表头区域 -->
        <div class="table_part1" @dragenter="dragEnter" @drop="dropCol" @dragover="dragOver">
          拖拽到此区域生成报表的表头
        </div>
        <div class="table_demo">
          <!-- 拖拽到列头区域 -->
          <div class="table_part2" @dragenter="dragEnter" @drop="dropRow" @dragover="dragOver">
            拖拽到此区域生成报表的列头
          </div>
          <!-- 自动生成表格区域 -->
          <div id="container1"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="js">
const container = document.querySelector('.table_all')
container.ondragstart = e => {
  console.log(e.target, '拖拽')
}
</script>
<script>
import { PivotSheet } from "@antv/s2";
export default {
  name: "TableDemo",
  props: {
    msg: String,
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "title",
        key: "field",
      },
      isShow:true,
      count: 1,
      customTree: [
        {
          field: "a-1",
          title: "自定义节点 a-1",
          description: "a-1 描述",
          pid: "0",
          children: [
            {
              field: "a-1-1",
              title: "自定义节点 a-1-1",
              description: "a-1-1 描述",
              pid: "a-1",
              children: [
                {
                  field: "measure-1",
                  title: "指标 1",
                  description: "指标 1 描述",
                  children: [],
                  pid: "a-1-1",
                },
                {
                  field: "measure-2",
                  title: "指标 2",
                  description: "指标 2 描述",
                  children: [],
                  pid: "a-1-1",
                },
              ],
            },
            {
              field: "a-1-2",
              title: "自定义节点 a-1-2",
              description: "a-1-2 描述",
              children: [],
              pid: "a-1",
            },
          ],
        },
        {
          field: "a-2",
          title: "自定义节点 a-2",
          description: "a-2 描述",
          children: [],
          pid: "0",
        },
      ],
      rowsTable: [],
      colsTable: [],
      dropData: [],
    };
  },
  methods: {
    // 映射树
     mapTree (org) {
            const haveChildren =
              Array.isArray(org.children) && org.children.length > 0;
            return {
              name: org.title,
              id: org.field,
              children: haveChildren ? org.children.map((i) => mapTree(i)) : [],
            };
          },
          

    async bootstrap(rows, columns) {
      const container = document.getElementById("container1");
      const s2DataConfig = {
        fields: {
          rows: rows,
          columns: columns,
          values: [""],
          valueInCols: false,
        },
        data: [],
      };
      const s2Options = {
        width: 1000,
        height: 300,
        hierarchyType: "grid",
        // cornerText: '自定义角头标题',
      };
      const s2 = new PivotSheet(container, s2DataConfig, s2Options);

      await s2.render(); // 返回 Promise
    },
    //
    setTableRows() {
      console.log(this.$refs.tree.getCheckedNodes());
      this.bootstrap(this.rowsTable, this.colsTable);
    },
    getCheck(data,checked) {
      // this.colsTable = [obj1];
      // this.rowsTable = [obj1];
      console.log(data,checked, "-----");
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },

    nodeDrop(node, event) {
      console.log(node, event, "拖拽");
      this.dropData = [node.data];
      console.log(this.dropData, "拖拽内容");
    },

    // 拖拽进入表头区域时触发
    dragEnter(e) {
      e.dataTransfer.effectAllowed = "move";
    },

    dropCol(e) {
      this.colsTable = this.dropData;
    //   this.rowsTable = this.dropData;
      console.log(e.target, "----拖拽到目标元素");
      this.bootstrap(this.rowsTable, this.colsTable);
    },
    dropRow(e) {
    //   this.colsTable = this.dropData;
      this.rowsTable = this.dropData;
      console.log(e.target, "----拖拽到目标元素");
      this.bootstrap(this.rowsTable, this.colsTable);
    },
    dragOver(e) {
      e.preventDefault();
    },
  },
  mounted() {
    // this.bootstrap()
    // this.mapTree(this.customTree)
    // this.isShow = true
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table_all {
  display: flex;
  justify-content: space-between;
  width: 1400px;
  height: 500px;
  border: 1px solid red;
}

.tree_content {
  border: 1px dashed green;
  margin: 10px;
  padding: 10px;
}

.table_part {
  width: 1150px;
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;
}

.table_part1 {
  width: 800px;
  height: 100px;
  border: 1px dashed green;
  line-height: 100px;
  text-align: center;
}

.table_part2 {
  width: 40px;
  height: 350px;
  border: 1px dashed green;
  margin-right: 10px;
  writing-mode: vertical-lr;
  text-align: center;
  text-orientation: upright;
  padding: 0 30px;
}

.table_demo {
  display: flex;
  justify-content: start;
}
</style>
